import Icon from '@/components/Icon'
import styled, { createGlobalStyle } from 'styled-components'
import img from '@img/all.png'
export const VmpGlobalStyle = createGlobalStyle`
    //画面合成弹窗样式覆盖
    .mcc-vmp-modal .kd-modal-body {
        overflow: visible;
    }
`
export const IconReturnArrow = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: 0 -1440px;
	cursor: default;
	z-index: 1;
	&:hover {
		background-position: -30px -1440px;
	}
`
export const IconStatusVideoSrc = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -260px -2024px;
`
/**
 * 离线
 */
export const IconApply = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -360px -3304px;
	&:hover {
		background-position: -378px -3304px;
	}
`
export const IconStatusOffline = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -640px -2004px;
`
export const IconStart = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: 0px -3304px;
	&:hover {
		background-position: -18px -3304px;
	}
`
export const IconStop = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -54px -3304px;
	&:hover {
		background-position: -72px -3304px;
	}
`
export const IconEdit = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -108px -3304px;
	&:hover {
		background-position: -126px -3304px;
	}
`
export const IconLeaveEdit = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -162px -3304px;
	&:hover {
		background-position: -180px -3304px;
	}
`
export const IconBatchPollState = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -342px -3304px;
`
export const StyledWrap = styled.div<{ mode: number }>`
	display: flex;
	height: 100%;
	flex-direction: column;
	width: 100%;
	font-size: 12px;
	.mcc_vmp_content_nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		margin-top: -12px;
		._mcc_nav_l {
			align-items: center;
		}
		._mcc_vmp_title {
			margin: 0;
			padding: 0;
			font-size: 16px !important;
			font-weight: bold;
			color: #4e4e4e;
			max-width: 260px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-right: 9px;
		}
		._mcc_nav_r {
			align-items: center;
			.start {
				cursor: pointer;
				color: #2f9d6b;
				display: flex;
				align-items: center;
				span:nth-child(1) {
					margin-right: 8px;
					position: relative;
					top: 1px;
				}
			}
			.stop {
				cursor: pointer;
				color: #c62619;
				display: flex;
				align-items: center;
				span:nth-child(1) {
					margin-right: 8px;
					position: relative;
					top: 1px;
				}
			}
			.edit {
				cursor: pointer;
				color: #797a7c;
				display: flex;
				align-items: center;
				margin-right: 24px;
				span:nth-child(1) {
					margin-right: 8px;
					position: relative;
					top: 1px;
				}
			}
			.leaveEdit {
				cursor: pointer;
				color: #797a7c;
				display: flex;
				align-items: center;
				margin-right: 24px;
				span:nth-child(1) {
					margin-right: 8px;
					position: relative;
					top: 1px;
				}
			}
			.apply {
				cursor: pointer;
				color: #2f9d6b;
				display: flex;
				align-items: center;
				margin-right: 24px;
				span:nth-child(1) {
					margin-right: 8px;
					position: relative;
					top: 1px;
				}
			}
		}
	}
	.mcc_vmp_content {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.mcc_vmp_up_content {
		._mcc_vmp_plan_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 28px;
		}
		._mcc_vmp_type_wrap {
			display: flex;
			align-items: center;
			padding-bottom: 32px;
			.broadcast-wrap {
				display: flex;
				align-items: center;
				margin-right: 15px;
				.label {
					margin-right: 24px;
				}
			}
		}
		.except-self-wrap {
			display: inline-flex;
			align-items: center;
			z-index: 1;
			margin: 10px 20px 20px 0px;
			.label {
				margin-right: 24px;
			}
		}
		.except-self-wrap-disabled {
			position: absolute;
			align-items: center;
			.except-self-wrap {
				display: inline-flex;
				align-items: center;
				z-index: 1;
				margin: 10px 20px 20px 0px;
				.label {
					margin-right: 24px;
					color: #b6b6b6;
				}
			}
		}
	}
	.mcc_vmp_down_content {
		display: flex;
		flex-direction: row;
		flex: 1;
		.left-panel {
			display: flex;
			position: relative;
			flex: 0 0 314px;
			margin-right: 40px;
			height: 100%;
			.poll-list {
				height: 100%;
				display: flex;
				flex-direction: column;
				flex: 1;
				.list-header {
					align-items: flex-start;
					display: flex;
					flex-direction: row;
					height: 40px;
					.list-header-wrap {
						align-items: center;
						display: flex;
						.list-header-title {
							margin-right: 16px;
						}
						.list-select {
							margin: 0px 8px;
						}
						.list-select-num {
							margin-right: 8px;
						}
					}
				}
				.list-content {
					height: 100%;
					overflow: auto;
					.list-item {
						height: 34px;
						line-height: 34px;
						display: flex;
						align-items: center;
						user-select: none;
						cursor: pointer;
						justify-content: space-between;
						.mt_info {
							display: flex;
							align-items: center;
							.name {
								margin-left: 10px;
							}
							.name-batch-poll {
								margin-left: 10px;
								color: #3e97ca;
								font-weight: 550;
							}
							.name-filter-batch-poll {
								width: 18px;
							}
						}
						.mt_status {
							display: flex;
							align-items: center;
							.online_status {
								margin-right: 10px;
							}
						}
					}
				}
			}
		}
		.right-panel {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 100%;
			flex: 1;
			overflow-y: auto;
			.batch_poll_operate_btn_wraap {
				margin: 10px 0px;
				.batch_poll_operate_btn {
					display: inline-block;
					color: #3e9bd0;
					-webkit-text-decoration: underline;
					text-decoration: underline;
					cursor: pointer;
					-webkit-flex-shrink: 0;
					-ms-flex-negative: 0;
					flex-shrink: 0;
				}
			}
			.content {
				display: inline-flex;
				width: 100%;
				flex: 1;
				.dynamic-view {
					width: 100%;
					height: 100%;
					border: 1px dashed #bababa;
					position: relative;
					text-align: center;
					.dynamic-view-content {
						div {
							height: 100%;
							width: 100%;
							left: 0;
							position: absolute;
							top: 0;
							display: flex;
							justify-content: center;
							align-items: center;
							.icon {
								display: inline-block;
								height: 21px;
								width: 21px;
								background-image: url(${img});
								background-position: 0px -558px;
								margin-right: 8px;
								vertical-align: top;
							}
							.tip_text {
								color: #ccc;
							}
						}
					}
				}
			}
			.bottom-setting {
				margin-top: 10px;
				height: 30px;
				display: flex;
				align-items: flex-start;
				.name-setting,
				.voice-setting {
					margin-right: 32px;
				}
			}
			.right-btn {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	* {
		box-sizing: border-box;
	}
`
